<template>
  <div>
    <Collapse default-active-key="4" ghost>
      <Collapse.Panel v-for="(item, index) in arr" :key="index" :header="item.itemName">
        <template #extra style="z-index: 100">
          <a-button
            size="small"
            style="z-index: 1; border: 1px solid #56d6b7; color: #56d6b7; margin-right: 16px"
            @click="edit()"
            >编辑</a-button
          >
          <a-button
            size="small"
            style="z-index: 1; border: 1px solid #e4b778; color: #e4b778; margin-right: 16px"
            @click="addClassify(2)"
            >添加</a-button
          >
          <a-button size="small" style="z-index: 1; color: #999999" @click="delRule(2)"
            >删除</a-button
          >
        </template>

        <!-- v-for="(item2, i) in item.childList" -->
        <div
          v-for="(item2, i) in item.childList"
          :key="i"
          :arr="item.childList"
          style="display: flex; justify-content: space-between; padding-right: 16px"
        >
          <p style="font-size: 14px; font-weight: 400; color: #666666; padding: 0 100px">
            {{ item2.itemName }}
          </p>
          <div>
            <a-button
              size="small"
              style="margin-right: 16px; border: 1px solid #e4b778; color: #e4b778"
              @click="addClassify(3)"
              >添加</a-button
            >
            <a-button size="small" style="color: #999999" @click="delRule(3)">删除</a-button>
          </div>
        </div>
      </Collapse.Panel>
    </Collapse>
  </div>
</template>

<script setup>
import { defineProps, reactive, ref } from 'vue';
// let name = ref('tree-list');
const props = defineProps({
  arr: { type: Array },
  index: { type: Number }
});
</script>

<style lang="scss" scoped></style>
